<template>
  <div id="mapContainer">
    <PIEReport class="pie-report" :reportList="reportList" @activeSelect="activeSelect">
    </PIEReport>
    <PIEReportCard class="pie-report-card" :processList="processList" :titleName="titlename"></PIEReportCard>
    <PIEModal :showBtn="false" :width="40" :height="30" :moveLeft="'55%'" :title="''"></PIEModal>
  </div>
</template>

<script lang="ts" setup>
import {
  reactive,
  onMounted,
  ref,
  getCurrentInstance,
} from "vue";
import baseMap from '@/plugins/lib/baseMaps';
// import myTable from '@/components/table/my-table.vue'
onMounted(() => {
  initMap()
})



let baseMapObj: any = null
let map: any = null
let reportList = [
  { id: 1, name: 'XX信息速报1' },
  { id: 2, name: 'XX信息速报2' },
  { id: 3, name: 'XX信息速报3' },
  { id: 4, name: 'XX信息速报4' },
  { id: 5, name: 'XX信息速报5' },
  { id: 6, name: 'XX信息速报6' },
  { id: 7, name: 'XX信息速报7' },
  { id: 8, name: 'XX信息速报8' },
]
let processList = [
  { id: 1, name: '流程一' },
  { id: 2, name: '流程二' },
  { id: 3, name: '流程三' },
  { id: 4, name: '流程四' },
]
let titlename = ref('XX信息速报1');
// 初始化地图
const initMap = () => {
  baseMapObj = new baseMap({
    container: "mapContainer",
    zoom: 3,
    // center: [123.31054687499999, 36.38591277287651],
  });

  map = baseMapObj.map;
  map.on("load", function () {
    // addAreaString();
    // addPointString();
  });
}
//点击QB事件
const activeSelect = (item: any) => {
  console.log(item)
  titlename.value = item.name;
}
</script>

<style lang="less" scoped>
#mapContainer {
  width: 100%;
  height: 100%;
  position: relative;

  .pie-report {
    position: absolute;
    top: @global-margin;
    left: 40px;
  }

  .pie-report-card {
    position: absolute;
    top: @global-margin;
    left: 300px;
  }

  .pie-report-pop {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  :deep .pie-modal .pie-modal-content {
    background-color: rgba(10, 37, 88, 0.8);
  }

  :deep .pie-modal .header .iconfont {
    background-color: transparent;
    color: #fff;
  }

  :deep .pie-modal .header {
    display: flex;
    flex-direction: row-reverse;
  }
}
</style>